<template>
  <div
    class="super-brand-activity-wrap"
    :class="{ isUserOfB: isUserOfB, vertical: isVerticalNav }"
    @click="pushBrand"
  >
    <div class="header">
      <div class="left">
        <div
          v-lazy:background-image="http2httpsLocal(activityObj.brandLogoUrl)"
          class="logo"
        ></div>
        <div class="info">
          <h3 :class="{ vertical: isVerticalNav }">
            {{ activityObj.brandName }}
          </h3>
          <div v-if="!isVerticalNav" class="label">
            <div>{{ activityObj.onlineProductCount }}款</div>
            <!-- <coupon-label
              v-if="showCouponTag"
              :thresholdAmount="couponVO.thresholdAmount"
              :amount="couponVO.amount"
            /> -->
            <div v-if="activityObj.redPacket" class="open-envelopes">
              <i class="icon-red-envelopes"></i>转发拆红包
            </div>
          </div>
        </div>
      </div>
      <div class="right" @click.stop="pushBrand">
        进入会场
      </div>
    </div>
    <div class="content">
      <div
        v-for="(item, idx) in productDList"
        :key="idx"
        class="product"
        @click.stop="pushProductDetail(item, idx)"
      >
        <activity-product
          :isUserOfB="isUserOfB"
          :productObj="item"
          :isVerticalNav="isVerticalNav"
        ></activity-product>
      </div>
      <div v-if="showMore" class="more" @click="pushBrand">
        <h3>查看更多</h3>
        <p>View All</p>
        <img src="@/assets/icon_more.png" />
      </div>
      <div class="product__placeholder"></div>
    </div>
    <div class="time-btn-wrap">
      <div class="wrap--left">
        <p
          v-if="activityObj.scheduleType === 3 && isUnderwayActivity"
          class="wrap__pop"
        >
          热卖进行中
        </p>
        <div v-else class="footer" :class="{ forcast: !isUnderwayActivity }">
          距
          <p v-if="isUnderwayActivity">结束</p>
          <p v-else>开始</p>
          <span>{{ d }}</span>
          天
          <span>{{ h }}</span>
          时
          <span>{{ m }}</span>
          分
        </div>
      </div>
      <div v-if="isUserOfB" class="btn-wrap">
        <span class="trans" @click.stop="handleTrans">
          转发
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { http2https } from '@/utils/util';
import activityProduct from './activityProduct.vue';

export default {
  name: 'activity',
  components: {
    activityProduct
  },
  props: {
    activityObj: {
      type: Object,
      default() {
        return {};
      }
    },
    isVerticalNav: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0
    },
    currentProperties: {
      type: String,
      default: ''
    },
    fromPage: {
      type: String,
      default: ''
    },
    tabName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      d: '',
      h: '',
      m: '',
      s: ''
    };
  },
  computed: {
    showMore() {
      const { onlineProductCount } = this.activityObj || {};
      return onlineProductCount > 9 && !this.isVerticalNav;
    },
    showHaiTao() {
      return Number(this.activityObj.crossBorderProduct) && !this.isVerticalNav;
    },
    showDaPai() {
      const { activityLabelMap } = this.activityObj || {};
      const { realSelfBusiness } = activityLabelMap || {};
      return realSelfBusiness === 1 && !this.isVerticalNav;
    },
    showCouponTag() {
      const { couponVO } = this.activityObj || {};
      const { thresholdAmount } = couponVO || {};
      return thresholdAmount;
    },
    couponVO() {
      const { couponVO } = this.activityObj || {};
      return couponVO || {};
    },
    isUnderwayActivity() {
      // 是否直播活动
      const { beginTime, beginTimeMs, endTime, endTimeMs } =
        this.activityObj || {};
      const curTimeStamp = new Date().getTime();
      if (beginTime && endTime) {
        const beginTimeStamp = Date.parse(
          new Date(beginTime.replace(/-/g, '/'))
        );
        const endTimeStamp = Date.parse(new Date(endTime.replace(/-/g, '/')));
        return curTimeStamp >= beginTimeStamp && curTimeStamp <= endTimeStamp;
      }
      // 搜索页推荐活动-开始/结束为beginTimeMs/endTimeMs
      if (beginTimeMs && endTimeMs) {
        return curTimeStamp >= beginTimeMs && curTimeStamp <= endTimeMs;
      }
      return false;
    },
    isUserOfB() {
      return true;
    },
    productDList() {
      const { productList } = this.activityObj || {};
      if (this.isVerticalNav && productList.length > 3) {
        return productList.slice(0, 3);
      }
      return productList || [];
    }
  },
  mounted() {
    this.countDown();
  },
  methods: {
    handleTrans() {
      const isForecastActivity = !this.isUnderwayActivity;
      this.$emit('onTransActivity', isForecastActivity);
    },
    http2httpsLocal(url) {
      return http2https(url);
    },
    pushBrand() {
      this.$router.push({
        path: '/brand',
        query: {
          activityNo: this.activityObj.activityNo,
          fromPage: this.$route.name,
          refSpm: '30.2765.2766'
        }
      });
    },
    pushProductDetail(obj) {
      this.$router.push({
        path: '/productDetail', // 二级路由兼容
        query: {
          refSpm: '30.2765.2766',
          productId: obj.productNo,
          activityNo: this.activityObj.activityNo
        }
      });
    },
    countDown() {
      let endTime = '';
      if (this.isUnderwayActivity) {
        if (this.activityObj.endTime) {
          endTime = this.activityObj.endTime.replace(/-/g, '/');
          endTime = Date.parse(new Date(endTime));
        }

        if (this.activityObj.endTimeMs) {
          endTime = this.activityObj.endTimeMs;
        }
      } else {
        if (this.activityObj.beginTime) {
          endTime = this.activityObj.beginTime.replace(/-/g, '/');
          endTime = Date.parse(new Date(endTime));
        }
        if (this.activityObj.beginTimeMs) {
          endTime = this.activityObj.beginTimeMs;
        }
      }

      const now = Date.parse(new Date());
      const differTime = endTime - now;
      let d;
      let h;
      let m;
      let s;
      if (differTime > 0) {
        d = Math.floor(differTime / 1000 / 60 / 60 / 24);
        h = Math.floor((differTime / 1000 / 60 / 60) % 24);
        m = Math.floor((differTime / 1000 / 60) % 60);
        s = Math.floor((differTime / 1000) % 60);
        d = d < 10 ? `0${d}` : d;
        h = h < 10 ? `0${h}` : h;
        m = m < 10 ? `0${m}` : m;
        s = s < 10 ? `0${s}` : s;
        this.d = `${d}`;
        this.h = `${h}`;
        this.m = `${m}`;
        this.s = `${s}`;
        setTimeout(() => {
          this.countDown();
        }, 1000);
      } else {
        this.d = '00';
        this.h = '00';
        this.m = '00';
        this.s = '00';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.super-brand-activity-wrap {
  width: 355px;
  padding: 4px 0 10px 12px;
  margin-left: 2px;
  box-sizing: border-box;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 6px;
  position: relative;

  &.vertical {
    width: 307px;
  }

  .icon-tag-box {
    position: absolute;
    top: -5px;
    left: 0;
    z-index: 100;

    .icon-tag {
      display: block;
      width: 93px;
      height: 27px;
      background-size: 100% 100%;
    }
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 61px;

    .left {
      display: flex;
      flex-direction: row;
      align-items: center;

      .logo {
        margin: 1px 10px 1px 0;
        width: 37px;
        height: 37px;
        border-radius: 4px;
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        border: 1px solid rgba(51, 51, 51, 0.05);
        padding: 2px;
        box-sizing: border-box;
      }

      .info {
        h3 {
          width: 200px;
          line-height: normal;
          font-size: 14px;
          color: #333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          &.vertical {
            width: 160px;
          }
        }

        .label {
          margin-top: 3px;
          display: flex;
          flex-flow: row;
          font-size: 10px;
          color: #ff9725;

          div:first-child {
            margin-right: 4px;
            padding: 0 4px;
            border: 1px solid #ffd5a8;
            border-radius: 2px;
            text-align: center;
            line-height: normal;
          }

          .open-envelopes {
            margin-left: 4px;
            padding: 0 6px;
            border: 1px solid #ff6a0d;
            border-radius: 1px;
            text-align: center;
            color: #ff6a0d;
            display: flex;
            align-items: center;
            line-height: normal;

            .icon-red-envelopes {
              display: inline-block;
              width: 8px;
              height: 10px;
              margin-right: 4px;
              background: #3ad9b7;
              background-size: 100% 100%;
            }
          }
        }
      }
    }

    .right {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      width: 68px;
      height: 26px;
      text-align: center;
      background-color: #e62525;
      border-radius: 16px;
      font-size: 12px;
      color: #fff;
    }
  }

  .content {
    display: flex;
    padding-bottom: 15px;
    overflow-x: auto;

    .product {
      margin-right: 6px;
      flex-shrink: 0;
    }

    .product:last-child {
      margin-right: 0;
    }

    .more {
      flex-shrink: 0;
      padding: 20px 0;
      width: 90px;
      height: 80px;
      text-align: center;
      background-color: #f8f8f8;
      border-radius: 4px;
      margin-right: 10px;

      h3 {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: #333;
      }

      p {
        height: 14px;
        line-height: 14px;
        font-size: 10px;
        color: #333;
      }

      img {
        display: inline-block;
        width: 30px;
        height: 30px;
      }
    }

    .product__placeholder {
      width: 2px;
      height: 80px;
      flex-shrink: 0;
    }
  }

  .time-btn-wrap {
    display: flex;
    justify-content: space-between;
    padding-right: 12px;
    align-items: center;
  }

  .wrap--left {
    .wrap__pop {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333;
      line-height: 17px;
    }
    .footer {
      display: flex;
      align-items: center;
      font-size: 11px;
      color: #999;

      span {
        padding: 0 5px;
        font-family: DINAlternate-Bold;
        font-size: 13px;
        font-weight: bold;
        color: #333;
      }
    }
  }

  .trans {
    width: 68px;
    height: 26px;
    line-height: normal;
    border-radius: 16px;
    box-sizing: border-box;
    border: 0.5px solid #ff1010;
    color: #ff1010;
    font-size: 12px;
    margin-left: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    &::before {
      content: '';
      display: block;
      margin-right: 5px;
      width: 20px;
      height: 20px;
      background: #d62222 no-repeat;
      background-size: 100% 100%;
    }
  }
}

.activity-wrap.isUserOfB:first-of-type {
  margin-top: 0;
}
</style>
